<!--
 * @Author: your name
 * @Date: 2021-02-15 20:59:04
 * @LastEditTime: 2021-04-28 12:23:17
 * @LastEditors: Please set LastEditors
 * @Description: 
 * @FilePath: \jianfa-admin\src\page\project-code\code-list\index.vue
-->
<template>
  <Container class="code-list">
    <!-- <div id="qrcode"></div>  -->
    <Breadcrumb :navList="$route.meta.nav"></Breadcrumb>
    <avue-crud
      :data="data"
      :option="option"
      :page.sync="page_config"
      @size-change="sizeChange"
      @current-change="currentChange"
      :table-loading="loading"
    >
      <template slot="header">
        <el-form inline :model="searchForm">
          <el-form-item label="三级菜单">
            <el-select
              @change="changeSearch"
              v-model="searchForm.sid"
              placeholder="请选择三级菜单"
              popper-class="add-menu"
            >
              <el-option
                v-for="item in menu"
                :key="item.id"
                :label="item.class_name"
                :value="item.id"
              >
                <span>{{ item.class_name }}</span>
                <i @click.stop="delMenu(item.id)" class="el-icon-close"></i>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="warning" @click="AddMenuVisible = true"
              >添加三级菜单</el-button
            >
            <el-button type="primary" @click="AddUrl"
              >添加实时动态 网址</el-button
            >
              <el-button  @click="MenuSortVisible=true">菜单排序</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot="file_img" slot-scope="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="`${IMGPATH}/${scope.row.file_path}`"
          :preview-src-list="[`${IMGPATH}/${scope.row.file_path}`]"
        >
        </el-image>
      </template>
      <template slot-scope="{ type, size, row }" slot="menu">
        <!--  <el-button
          icon="el-icon-edit"
          :size="size"
          :type="type"
          @click="toEdit(row.id)"
          >编辑</el-button
        > -->
        <del-button :size="size" :type="type" @click="delPro(row.id)">
          删除</del-button
        >
      </template>
    </avue-crud>
    <AddMenu :visible.sync="AddMenuVisible" @getMenu="getMenu" />
    <AddUrl
      :visible.sync="AddUrlVisible"
      @getData="getData"
      :cid="currentMenuId"
    />
     <MenuSort :visible.sync="MenuSortVisible" :currentMenu='currentMenu' @getMenu="getMenu" :menu='menu'/>
  </Container>
</template>
<script>
import mixins_page from "@/assets/mixins/paging";
import AddMenu from "./components/addMenu";
import AddUrl from "./components/addUrl";
import MenuSort from './components/menuSort';
export default {
  mixins: [mixins_page],
  components: { AddMenu, AddUrl ,MenuSort},
  data() {
    return {
      AddMenuVisible: false, //添加菜单弹窗
      AddUrlVisible: false, //添加文件弹窗
            MenuSortVisible:false, //添加文件弹窗
      currentMenuId: 0, //当前选中的三级菜单cid
      searchForm: {
        sid: ""
      },
      loading: true,
      data: [],
      menu: [], //三级菜单
      currentMenu: {}, //当前选中的menu对象
      option: {
        searchShow: false,
        searchSize: "mini",
        // page: true,
        index: true,
        indexLabel: "序号",
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        addBtn: false,
        cancelBtn: false,
        align: "center",
        menuAlign: "center",
        column: [
          {
            label: "url网址(多条只取第一条网址跳转)",
            prop: "url"
          },

          {
            label: "创建日期",
            prop: "create_time",
            width: "200px"
          }
        ]
      }
    };
  },
  created() {
    this.getMenu();
  },
  methods: {
    //添加文件弹窗
    AddUrl() {
      if (!this.searchForm.sid) {
        this.$message.error("请先选择 三级菜单！！");
        return;
      } else {
        this.AddUrlVisible = true;
      }
    },
    //删除三级菜单
    async delMenu(id) {
      const { code } = await this.$api.realTime.delList({
        id
      });
      if (!code) {
        this.getMenu();
        this.getData();
        this.searchForm.sid = "";
        this.$message.success("菜单删除成功！");
      }
    },
    //选择下拉框触发搜索
    changeSearch(sid) {
      this.currentMenuId = sid;
      this.getData();
    },

    //获取三级菜单
    async getMenu() {
      const { code, data } = await this.$api.realTime.getMenu(
        this.$route.query
      );
      if (!code) {
        this.menu = data;
      }
    },
    // 删除菜单url
    async delPro(id) {
      const { code, msg } = await this.$api.realTime.delUrl({
        id
      });
      if (!code) {
        this.$message.success(msg);
        this.getData();
      }
    },
    /* // 去编辑
    toEdit(id) {
      this.$router.push({ path: "/qr-code-edit", query: { code_id: id } });
    },  */
    /* rowStyle({ row, column, rowIndex }) {
      return {
        height: "120px",
      };
    }, */
    //获取url列表
    async getData() {
      this.loading = true;
      const {
        code,
        data: { results, total }
      } = await this.$api.realTime.getUrl({
        id: this.currentMenuId,
        page: this.page_config.currentPage,
        limit: this.page_config.pageSize
      });
      if (!code) {
        this.data = results;
        this.page_config.total = total;
        this.loading = false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.code-list {
}
</style>
